<div hidden id="table-config" #dhltableConfig>
  <ng-content #dhltableConfigContent></ng-content>
</div>

<div class="dhl-table">
  <div #dhlTableTopAction>
    <div nz-row class="table-top-action" *ngIf="showTop">
      <dhl-button *ngIf="showAdd && showAddPerm" name="新增" [loading]="addBtnLoading" (buttonClick)="add()"
                  icon="plus"></dhl-button>
      <dhl-button *ngIf="customField" name="自定义字段" (buttonClick)="customFields()" icon="tool"></dhl-button>
      <dhl-confirm-button *ngIf="showSelectDelete && showSelectDeletePerm"
                          name="多选删除"
                          content="确定删除？"
                          [type]="deleteType"
                          [loading]="batchLoading"
                          (okClick)="batchDelete()"
                          [disabled]="disableBatchDelete"
                          icon="delete"></dhl-confirm-button>
      <dhl-drop-down *ngIf="showBatchDelete && showBatchDeletePerm"
                     [name]="'上传批量删除'"
                     [type]="deleteType"
                     [buttons]="batchDeleteBtn"
                     [loading]="batchDeleteLoading"></dhl-drop-down>
      <dhl-button *ngIf="isShowExport && isShowExportPerm"
                  name="导出"
                  [loading]="exportLoading"
                  (buttonClick)="export()"
                  icon="export"></dhl-button>
      <dhl-drop-down *ngIf="showBatchImport && showBatchImportPerm"
                     [name]="'上传批量导入'"
                     [buttons]="batchImportBtn"
                     [loading]="batchImportLoading"></dhl-drop-down>
      <dhl-button [name]="'下载导入日志'" [type]="btnTypeLink" (buttonClick)="downLoadImportLog()"
                  [show]="showDownloadImportLog"></dhl-button>

    </div>

  </div>
  <nz-table #dhltable
            nzShowSizeChanger
            [nzFrontPagination]="false"
            [nzPageSizeOptions]="sizeOptions"
            [nzData]="datas"
            [nzScroll]="scroll"
            [nzShowTotal]="totalSum"
            [nzTotal]="total"
            [nzLoadingDelay]="2"
            [nzLoading]="loading"
            [(nzPageIndex)]="pageIndex"
            [(nzPageSize)]="pageSize"
            (nzPageSizeChange)="pageSizeChange($event)"
            (nzPageIndexChange)="pageIndexChange($event)"
            nzShowQuickJumper
  >

    <!--head-->
    <thead #dhltableHead class="dhl-table-head">
    <tr>
      <th *ngIf="showCheck"
          nzShowCheckbox
          nzAlign="center"
          nzLeft="0px"
          nzWidth="40px"
          [nzChecked]="isCheckAll"
          [nzDisabled]="isDisableAll"
          [nzIndeterminate]="indeterminate"
          (nzCheckedChange)="checkedAll()"
      ></th>
      <th *ngFor="let title of titles"
          nzAlign="center"
          [(nzSortOrder)]="title.sortType"
          (nzSortChange)="sortChange()"
          nzShowSort="{{title.sort}}"
          nzLeft="{{title.headfixed}}"
          nzRight="{{title.tailfiexd}}"
          nzWidth="{{title.width}}">
        {{title.name}}
        <i *ngIf="showEditPerm && (title.edit || title.dicCode)"
           class="table-title-edit-icon"
           nz-icon
           nzType="edit"
           nzTheme="outline">
        </i>
      </th>
      <th *ngIf="showAction" [nzWidth]="actionWidth + 'px'" nzAlign="center" nzRight="0px">操作</th>
    </tr>
    </thead>


    <!--body-->
    <tbody #dhltableBody id="dhltableBody" class="dhl-table-body">

    <tr *ngFor="let row of dhltable.data;let yIndex=index;">
      <td *ngIf="showCheck"
          nzShowCheckbox
          nzLeft="0px"
          nzWidth="40px"
          [(nzChecked)]="row.checked"
          [nzDisabled]="row.disabled"
          (nzCheckedChange)="checkedChange(row,yIndex)"
      ></td>

      <ng-container *ngFor="let title of titles;let xIndex = index">
        <ng-container [ngSwitch]="getFixType(xIndex)">

          <!--Left 格式-->
          <td *ngSwitchCase="1" nzLeft="{{title.headfixed}}" nzAlign="{{title.align}}" nzBreakWord>
             <span [hidden]="title.edit && editRowIndex == yIndex && editCol == title.dataKey"
                   (click)="onClickCell($event,yIndex,row, title.dataKey)">
              {{getCellValue(row, title.dataKey)}}
            </span>
            <input *ngIf="title.edit" [hidden]="!(editRowIndex == yIndex && editCol == title.dataKey)"
                   type="text" nz-input
                   [(ngModel)]="editValue"
                   (keydown)="keyDown($event)"
                   (blur)="stopEdit()"/>

            <ng-template #inputTemplate></ng-template>
          </td>

          <!--Right 格式-->
          <td *ngSwitchCase="2" nzRight="{{title.tailfiexd}}" nzAlign="{{title.align}}" nzBreakWord>
            <span [hidden]="title.edit && editRowIndex == yIndex && editCol == title.dataKey"
                  (click)="onClickCell($event,yIndex,row, title.dataKey)">
              {{getCellValue(row, title.dataKey)}}
            </span>
            <input *ngIf="title.edit" [hidden]="!(editRowIndex == yIndex && editCol == title.dataKey)"
                   type="text" nz-input
                   [(ngModel)]="editValue"
                   (keydown)="keyDown($event)"
                   (blur)="stopEdit()"/>
            <ng-template #inputTemplate></ng-template>
          </td>

          <!--Center 格式-->
          <td *ngSwitchCase="3" nzAlign="{{title.align}}" nzBreakWord>
            <span *ngIf="!title.toolTip"
                  [hidden]="hiddenSpan && editRowIndex == yIndex && editCol == title.dataKey"
                  [style]="title.dicCode || title.edit ? {
                    'min-width': '50px',
                    'min-height': '20px',
                    'line-height': '20px',
                    'display': 'inline-block'
                  }:{}"
                  (click)="onClickCell($event,yIndex,row, title)">
              {{getCellValue(row, title.dataKey)}}
            </span>

            <span *ngIf="title.toolTip && getCellValue(row, title.dataKey)"
                  nz-tooltip
                  [nzTooltipTitle]="titleTemplate"
                  (click)="onClickCell($event,yIndex,row, title)">
              {{getCellValue(row, title.dataKey)}}
            </span>

            <span *ngIf="title.onClick && !getCellValue(row, title.dataKey)"
                  [style]="{'min-width': '50px', 'min-height': '30px', 'display': 'inline-block'}"
                  (click)="onClickCell($event,yIndex,row, title)">
            </span>


            <ng-template #titleTemplate let-thing>
              <span [innerHTML]="row[title.toolTip]"></span>
            </ng-template>

            <input *ngIf="title.edit" [hidden]="hiddenInput || !(editRowIndex == yIndex && editCol == title.dataKey)"
                   type="text" nz-input
                   [(ngModel)]="editValue"
                   (keydown)="keyDown($event)"
                   (blur)="stopEdit()"/>

            <dhl-select *ngIf="title.dicCode"
                        [hidden]="hiddenSelect || !(editRowIndex == yIndex && editCol == title.dataKey)"
                        [labelWidth]="0"
                        [dicCode]="title.dicCode"
                        [(value)]="dictionaryValue"
                        (onBlur)="selectBlur()"
                        [allowClear]="false"
                        (valueChange)="titleSelectChange(row,title.dicCode)">
            </dhl-select>
            <ng-template #inputTemplate></ng-template>
          </td>

        </ng-container>
      </ng-container>

      <td *ngIf="showAction" class="actionCol" nzAlign="center" nzRight="0px">
        <dhl-button [show]="showEdit && showEditPerm" [loading]="updateBtnLoading[yIndex]"
                    (buttonClick)="update(row,yIndex)"
                    name="修改"
                    icon="edit"
                    [sizeType]="sizeType"></dhl-button>
        <span *ngFor="let action of actions;">
            <dhl-button
              [show]="showButton(action,row)"
              [disabled]="disableButton(action,row)"
              [loading]="this.actionBtnLoading[action.attr('name')][yIndex]"
              (buttonClick)="customAction(action,row,yIndex)"
              name="{{action.attr('name')}}"
              icon="{{action.attr('icon')}}"
              [sizeType]="sizeType">
            </dhl-button>
        </span>
        <dhl-confirm-button [show]="showDelete && showDeletePerm" (okClick)="delete(row)" name="删除" icon="delete"
                            [type]="gray"
                            [sizeType]="sizeType" content="确认删除？"></dhl-confirm-button>
      </td>
    </tr>
    </tbody>
  </nz-table>
  <span *ngIf="showCheck" style="position: relative; top: -50px;">已选择：{{checkedDatas.length}}</span>
</div>


<ng-template #totalSum>总计：{{total}}</ng-template>


<dhl-upload [uploadPath]="uploadPath"
            [type]="'button'"
            [params]="uploadParams"
            (startUpload)="startUpload()"
            (endUpload)="endUpload($event)"
            hidden #uploadEleRef></dhl-upload>


<dhl-upload [uploadPath]="uploadPath"
            [type]="'button'"
            [params]="uploadParams"
            (startUpload)="startImport()"
            (endUpload)="endImport($event)"
            hidden #batchImportEleRef></dhl-upload>



